<style scoped>

    .page-wrap{
        background-color: #F3F3F3;
    }

    .myjifen{
        height: 100%;
        background-color: #F3F3F3;
        padding: 0 0.12rem;
    }
    .myjifen p{
        margin: 0;
        padding: 0;
    }
    .myjifen .list{
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        align-items: center;
        -webkit-align-items: center;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        font-size: 0.14rem;
        color: #B2B2B2;
        padding: 0.13rem 0;
        border-bottom: 1px solid #E8E8E8;
    }
    .myjifen .list>div>p{
        font-size: 0.15rem;
        color: #6F6F6F;
        line-height: 0.28rem;
    }
    .myjifen .list>span{
        font-size: 0.22rem;
    }
    .myjifen .bg_y{
        color: #d41e37;
    }
    .myjifen .bg_g{
        color: #56b02c;
    }
    .myjifen .score_title{position: relative}
    .myjifen .score_title>span{
        color: #909090;
        height: 0.21rem;
        line-height: 0.21rem;
        background-color:#F3F3F3;
        position: absolute;
        left:50%;
        top: 0.06rem;
        width: 0.64rem;
        padding: 0 0.05rem;
        margin-left: -0.375rem;
    }
    .myjifen .line{
        width: 100%;
        height: 0;
        border-bottom: 1px solid #E8E8E8;
        padding-top: 0.18rem;
    }
</style>
<template>
    <div class="page-wrap">
        <header-component :page-name="pageName"></header-component>

        <section class="myjifen">
            <!--<div class="score_title">-->
                <!--<div class="line"></div>-->
                <!--<span>积分明细</span>-->
            <!--</div>-->

            <div class="list" v-for="(key,item) in data">
                <div>
                    <p v-show="item.type==1">消费积分</p>
                    <p v-show="item.type==2">晒单积分</p>
                    <p v-show="item.type==3">邀请好友积分</p>
                    <p v-show="item.type==4">签到积分</p>
                    <p v-show="item.type==5">{{item.product_title}}</p>
                    <p v-show="item.type==6">中奖分享积分</p>
                    <p v-show="item.type==7">普通分享积分</p>

                    <span>{{item.time}}</span>
                </div>

                <span class="bg_y" v-show="item.type==1">+{{item.points}}</span>
                <span class="bg_g" v-show="item.type==2">+{{item.points}}</span>
                <span class="bg_g" v-show="item.type==3">+{{item.points}}</span>
                <span class="bg_g" v-show="item.type==4">+{{item.points}}</span>
                <span class="bg_y" v-show="item.type==5">-{{item.points}}</span>
                <span class="bg_g" v-show="item.type==6">+{{item.points}}</span>
                <span class="bg_g" v-show="item.type==7">+{{item.points}}</span>

            </div>
        </section>
    </div>

    <pop :status-pop="statusPop" :msg="msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>
</template>

<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    export default{
        data(){
            return{
                pageName:'积分明细',
                data:{},
                statusPop:false,
                msg:''
            }
        },

        created(){
            this.$dispatch('isLoading',true)
        },

        async ready(){
            this.getScoreItem();
            this.$dispatch('isLoading',false);
        },

        components:{
            headerComponent,
            pop
        },

        methods:{
            async getScoreItem() {
                let res = await Request.get(Config.apiDomain+"/integral/detail?token="+ User.token);


                if(res.status==200){
                    console.log(res.data);
                    this.data = res.data
                }
                else{
                    this.statusPop = true;
                    this.msg = res.msg;
                }
            }
        }
    }
</script>
